<template>
    <div class="item-size-choose" @touchmove.stop.prevent>
        <div
                :class="{
        mask: true,
        animated: true,
        fadeIn: !pageLeave,
        fadeOut: pageLeave
      }"
                @click="maskClick"
        ></div>
        <div
                :class="{
        'choose-panel': true,
        animated: true,
        slideInUp: !pageLeave,
        slideOutDown: pageLeave
      }"
                @click.stop
        >
            <div class="top-bar">
                <div class="title">共{{maskNum}}条评论</div>
                <div @click="maskClick" class="btn-close" style="font-size:1.2rem;">×</div>
            </div>
            <div class="comment" @touchmove.stop ref="comment">
                <div class="comment-cell with-grey-bottom-border" v-for="(item,index) in maskList" :key="index">
                    <span class="username">{{item.nickname}}:</span>{{item.describe}}
                </div>
            </div>
            <div @touchmove.prevent class="input-bar">
                <input
                        :placeholder="'回复' + ''"
                        id="comment"
                        name="comment"
                        type="text"
                        v-model="content"
                />
                <button @click="sendComment" class="send-btn">发送</button>
            </div>
        </div>
        <load-more @loadMore="loadMore"></load-more>
    </div>
</template>

<script>
    import {getMaskData,sendMask} from '@/api/dynamics';
    import {mapState } from "vuex";
    import loadMore from '@/components/load-more';
    export default {
        data() {
            return {
                pageLeave: false,
                maskList:[],
                maskNum:'',
                content:'',
                page:1,
                isAll: false,
                loading: false,
            };
        },
        computed:{
            ...mapState({
                nickname: state => state.user.nickname
            })
        },
        props:['CommentInfo'],
        methods: {
            maskClick() {
                this.pageLeave = true;
                setTimeout(() => {
                    this.$emit("panelClose", "");
                }, 400);
            },
            sendComment(){
                //发表动态评论，入库
                sendMask({
                    id:this.CommentInfo.id,
                    detail:this.content
                }).then(()=>{
                    //入库后，页面追加
                    if(this.content!==''){
                        this.maskList.unshift({nickname:this.nickname,describe:this.content});
                        //评论总数自增一
                        this.maskNum++;
                        //清空表框
                        this.content='';
                    }

                });
            },
            getCommentList(id,page){
                //动态评论
                getMaskData({
                    id,
                    page
                }).then((res) => {
                    if (res.status == 200) {
                        let comment=res.data.data.reverse();
                        comment.forEach((item)=>{
                            let obj={};
                            obj.nickname=item.nickname;
                            obj.describe=item.describe;
                            this.maskList.push(obj);
                        });
                        if (res.data.data.length === 0) {
                            this.isAll = true;
                            this.$dialog.toast({
                                mes: "已经到最底了",
                                timeout: 1000
                            });
                        }
                        //计算动态条数
                        this.maskNum=this.maskList.length;
                    }
                });
            },
            loadMore(){
                if (this.loading || this.isAll || this.maskList.length === 0) return;
                this.loading = true;
                this.getCommentList(this.CommentInfo.id,++this.page);
            }
        },
        created() {
            this.getCommentList(this.CommentInfo.id,1);
        },
        components:{
            loadMore
        }
    };
</script>

<style lang="less" scoped>
    .item-size-choose {
        z-index: 9999;
        position: relative;

        .mask {
            animation-duration: 0.4s;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .choose-panel {
            animation-duration: 0.4s;
            z-index: 10000;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80%;
            background: rgba(245, 245, 245, 1);
            border-top-left-radius: 0.4rem;
            border-top-right-radius: 0.4rem;

            .share-bar {
                display: flex;
                width: 100%;
                justify-content: space-between;
                padding: 0 3.2%;
                margin-top: 2.7rem;
                text-align: center;
                color: rgba(68, 68, 68, 1);
                font-size: 0.56rem;
                height: 3.5rem;

                .share-btn {
                    width: 25%;

                    img {
                        width: 2rem;
                        height: 2rem;
                    }
                }
            }

            .bottom-bar {
                margin-top: 1rem;
                justify-content: flex-start;
            }

            .text {
                border-right: 1px solid #dfdfdf;
            }

            .top-bar {
                width: 100%;
                background: #fff;
                height: 2rem;
                line-height: 2rem;
                position: relative;

                .title {
                    font-weight: bold;
                    color: rgba(68, 68, 68, 1);
                    font-size: 0.64rem;
                    text-align: center;
                    font-weight: bold;
                }

                .btn-close {
                    position: absolute;
                    right: 0.54rem;
                    top: 0rem;
                    font-size: 0.8rem;
                }
            }

            .comment {
                padding: 0 3.2%;
                height: calc(100% - 4rem);
                overflow: auto;

                .comment-cell {
                    padding: 0.6rem 0;
                    color: rgba(102, 102, 102, 1);
                    font-size: 0.58rem;

                    .username {
                        color: rgba(56, 117, 209, 1);
                    }
                }
            }

            .input-bar {
                /*position: absolute;
                left: 0;
                bottom: 0;
                z-index: 999;*/
                width: 100%;
                background: #fff;
                display: flex;
                justify-content: space-between;
                height: 2rem;
                padding: 0.3rem 3.2%;

                input {
                    border: none;
                    font-size: 0.52rem;
                    background-color: #f1f1f1;
                    width: calc(100% - 2rem);
                    padding-left: 0.5rem;
                }

                .send-btn {
                    border: none;
                    background: none;
                    font-size: 0.52rem;
                    color: #444444;
                    width: 2rem;
                    text-align: center;
                    padding: 0;
                }
            }
        }
    }
</style>
